<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" id='fileInp' accept="image/*">
    <br>
    <img src="" alt="" id='serverImg'>

    <script src="js/md5.min.js"></script>
    <script src="js/ajax.js"></script>

    <script>
        function convertBase64(file){
            return new Promise((res,rej)=>{
                let fileRead = new FileReader();
                fileRead.readAsDataURL(file);
                fileRead.onload=ev=>{
                    res(ev.target.result)
                }
            })
        }
        // let limitType = ['image/jpeg','image/jpg','image/png','image/gif']
        // let limitMax = 100*1024
        fileInp.onchange =async function  (){
            let file = fileInp.files[0] //获取上传文件信息 { .... }
            if(!file)return
            console.log(file)

            let base64 = await convertBase64(file)
            let res = await $ajax({
                url:'http://127.0.0.1:5678/single2',
                headers:{
                    'Content-Type':'application/x-www-form-unlencoded'
                },
                data: `chunk=${encodeURIComponent(base64)}&filename=${$formatFileName(file.name).filename}`
            })
            if(res.code === 0){
                serverImg.src = res.path
            }
        }
    </script>

</body>
</html>
